{% extends "../layouts/admin.html" %} {% block content %}
<header class="header navbar bg-white shadow">
  <div class="btn-group tool-button">
    <a class="btn btn-primary navbar-btn" href="/weixin/menu/add?id={{wxid}}" data-pjax><i class="ti-plus"></i> 添加菜单</a>
    <a href="/weixin/menu/index?id={{wxid}}" data-pjax id="_reload"></a>
  </div>
  <div class="btn-group">
    <div >
      <select id="wxid" name="wxid" class="form-control">
       {% for item in wxlist %}
        <option value="{{item.id}}" {% if item.id==wxid %}selected{% endif %}>{{item.appname }}</option>
        {% endfor %}
      </select>
    </div>
  </div>
  <div class="pull-right">
    <div class="btn-group tool-button">
      <button class="btn btn-primary navbar-btn" onclick="sort()"> 保存排序</button>
    </div>
    <div class="btn-group tool-button">
      <button class="btn btn-primary navbar-btn" onclick="complete()"><i class="ti-share"></i> 推送到微信</button>
    </div>
  </div>
</header>
<div class="modal-body no-p">
  <div class="panel">
    <div class="panel-heading no-b">
    </div>
    <div class="panel-body" style="padding-top: 30px;">

      <div class="cf nestable-lists">
        <div class="dd" id="nestable3">
          <ol class="dd-list">
          	{% for item in firstWxMenus %}
         
            <li class="dd-item dd3-item" data-id="{{item.id }}">
              <div class="dd-handle dd3-handle">Drag</div>
              <div class="dd3-content">{{ item.name }} <span style="color: deepskyblue"> {{ item.key}}{{ item.url}}</span>
                <div class="btn-group pull-right"><button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
                    <i class="ti-settings"></i> <span class="ti-angle-down"></span></button><ul class="dropdown-menu" role="menu">
                    <li><a href="/weixin/menu/edit?id={{item.id}}" data-pjax>修改</a></li>
                    <li><a href="javascript:;" onclick="del({{item.id}})">删除</a></li>
                </ul></div>
              </div>
              {% if secondWxMenus[item.id] %}
              <ol class="dd-list">
              	{% for itm in secondWxMenus[item.id] %}
     
                <li class="dd-item dd3-item" data-id="{{ itm.id }}">
                  <div class="dd-handle dd3-handle">Drag</div>
                  <div class="dd3-content">{{itm.name}} <span style="color: deepskyblue"> {{itm.key}}{{itm.url}}</span>
                    <div class="btn-group pull-right"><button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
                        <i class="ti-settings"></i> <span class="ti-angle-down"></span></button><ul class="dropdown-menu" role="menu">
                        <li><a href="/weixin/menu/edit?id={{itm.id}}" data-pjax>修改</a></li>
                        <li><a href="javascript:;" onclick="del({{itm.id}})">删除</a></li>
                      </ul></div>
                  </div>
                </li>
                {% endfor %}
              </ol>
              {% endif %}
            </li>
             {% endfor %}

          </ol>
        </div>
      </div>

    </div>
  </div>
</div>
<div id="dialogDelete" class="modal fade bs-modal-sm" tabindex="-2" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title">删除菜单</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-xs-12">
            删除后无法恢复，请谨慎操作！
            <br/>确定要删除吗？
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
        <button id="ok" type="button" class="btn btn-primary" data-loading-text="正在删除...">确 定</button>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
  function del(id){
    var dialog = $("#dialogDelete");
    dialog.modal("show");
    dialog.find("#ok").unbind("click");
    dialog.find("#ok").bind("click", function(event){
      var btn = $(this);
      btn.button("loading");
      $.post("/weixin/menu/delete",{
      	id: id
      },function(data){
        //重置按钮状态，关闭提示框
        dialog.modal("hide");
        if(data.errno==0){
          Toast.success(data.data);
          treeTable.treetable("removeNode", id);
          $("#_reload").trigger("click");
          //从表格中移除此行
        }else{
          Toast.error(data.errmsg);
        }
        btn.button("reset");
      },"json");
    });
  }
  function sort(){
    $.post("/weixin/menu/sort", {wxid:'{{wxid}}',ids:JSON.stringify($("#nestable3").nestable('serialize'))}, function (data) {
      if (data.errno == 0) {
        Toast.success(data.data);
      } else {
        Toast.error(data.errmsg);
      }
    }, "json");
  }
  function complete(){
    sublime.showLoadingbar($(".main-content"));
    $.post("/weixin/menu/push", {wxid:'{{wxid}}'}, function (data) {
      sublime.closeLoadingbar($(".main-content"));
      if (data.errno == 0) {
        Toast.success(data.data);

      } else {
        Toast.error(data.errmsg);
      }
    }, "json");
  }
  $(function () {
    $("#nestable3").nestable();
    $("#wxid").on("change",function(){
      $("#_reload").attr("href","/weixin/menu/index?id="+$(this).val());
      $("#_reload").trigger("click");
    });
  });

</script>
{% endblock %}